<template>
  <div class="systemCommunity">
    <!-- 顶部搜索栏 -->
    <div class="screenContent">
      <div class="screenNav">
        <div class="scrTop">
          <div class="labItem">
            <div class="label">关键字：</div>
            <div class="labScach">
              <input v-model="name" placeholder="请输入村/社区/居委会名称" @input="getInput()" />
              <search class="searchIcon" theme="outline" size="20" fill="#999" />
            </div>
          </div>
          <div class="labItem">
            <div class="label">类型：</div>
            <div>
              <el-select v-model="id" placeholder="请选择" size="large" clearable="true" @change="getVillage(id)">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>
          <!-- <div class="labItem">
            <div class="label">状态：</div>
            <div>
              <el-select v-model="value" placeholder="选择状态" size="large" clearable="true" @change="getIsValid(value)">
                <el-option v-for="item1 in option" :key="item1.value" :label="item1.name" :value="item1.value" />
              </el-select>
            </div>
          </div> -->
          <div class="btn success" @click="clearReq()">
            <span>添加</span>
            <people-plus class="btnIcon" theme="outline" size="20" fill="#fff" />
          </div>
        </div>
      </div>
      <div class="censusNav">
        <div class="censusItem">
          <home-two class="hoemIcon" theme="filled" size="22" fill="#2C83E4" />
          <span>村:</span>
          <span class="color3">{{ villageTotal.villageTotal }}</span>
        </div>
        <div class="censusItem">
          <home-two class="hoemIcon" theme="filled" size="22" fill="#ED7B07" />
          <span>社区:</span>
          <span class="color3">{{ villageTotal.areaTotal }}</span>
        </div>
        <div class="censusItem">
          <home-two class="hoemIcon" theme="filled" size="22" fill="#3ABF70" />
          <span>居委:</span>
          <span class="color3">{{ villageTotal.messageTotal }}</span>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="tableCont">
      <el-table :data="findByVillageList" :header-cell-style="{ color: '#999' }" :cell-style="{ color: '#35353F' }"
        style="width: 100%" v-loading="loading">
        <el-table-column label="序号" width="80">
          <template #default="scope">
            {{ (adminVillageRequest.page - 1) * 10 + (scope.$index + 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" width="200" :show-overflow-tooltip="true" />
        <el-table-column prop="pid" label="类型" width="120">
          <template #default="scope">
            <span v-if="scope.row.pid == 2">城镇</span>
            <span v-if="scope.row.pid == 3">行政村</span>
            <span v-if="scope.row.pid == 4">居委会</span>
            <span v-if="scope.row.pid == 16">社区</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column prop="synopsis" label="简介" width="120">
          <template #default="scope">
            <span @click="getIntroduction(scope.row.id)" class="color1" style="cursor:pointer">
              查看
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" width="160">
          <template #default="scope">
            <span>{{ scope.row.contacts }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="160" />
        <el-table-column prop="isValid" label="状态">
          <template #default="scope">
            <span v-if="scope.row.isValid == 1">正常</span>
            <span v-if="scope.row.isValid == 0" style="color: #f05e5e">禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="220">
          <template #default="scope">
            <span class="spanBtn color1" @click="getOneVillage(scope.row.id)">编辑</span>
            <span class="spanBtn color2" v-if="scope.row.isValid === 1"
              @click="updateVillageStatus(scope.row.id, scope.row.isValid)">禁用</span>
            <span class="spanBtn color5" v-if="scope.row.isValid === 0"
              @click="updateVillageStatus(scope.row.id, scope.row.isValid)">启用</span>
            <span class="spanBtn color3" @click="updateVillageStatus(scope.row.id)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next, jumper" :total="total"
          :page-size="adminVillageRequest.limit" @current-change="getFindByVillageList"
          :current-page="adminVillageRequest.page">
        </el-pagination>
      </div>
    </div>

    <!-- 添加村社窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="communityShow" width="728px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass" v-if="newId == 0">添加村社</span>
          <span :id="titleId" :class="titleClass" v-if="newId != 0">修改村社</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel loginDialog">
        <div class="labelItem">
          <div class="term">
            <div class="label">名称</div>
            <div>
              <el-input size="large" v-model="addVillageReq.name" placeholder="请输入村社名称" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">类型</div>
            <div>
              <el-select v-model="addVillageReq.pid" class="m-2" placeholder="选择村社" size="large">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">联系人</div>
            <div>
              <el-input size="large" v-model="addVillageReq.contacts" placeholder="请输入联系人名称" clearable />
            </div>
          </div>
          <div class="term">
            <div class="label">联系电话</div>
            <div>
              <el-input size="large" v-model="addVillageReq.phone" placeholder="请输入联系电话" clearable />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term">
            <div class="label">社区图片</div>
            <div>
              <el-upload class="uploadDemo" :file-list="[]" action="#" multiple :limit="1" :show-file-list="false"
                :http-request="() => { }" :on-change="addAllChangeImg" value-format="timestamp"
                accept=".jpg,.png,JPG,PNG" :auto-upload="false">
                <template v-if="!uploadPhotoForm.imageList.length" #trigger>
                  <div class="uploadBtn" v-loading="uploadPicture">
                    <upload-picture theme="filled" size="34" fill="#333" />
                    <span>图片最多上传一张</span>
                  </div>
                </template>
              </el-upload>
              <div class="uploadListImg">
                <div class="uploadImg" v-for="(item, index) in uploadPhotoForm.imageList" :key="item.name">
                  <!-- <img :src="item" alt="" /> -->
                  <el-image class="image" :src="item" fit="contain" />
                  <div class="hoverIcon">
                    <zoom-in class="outIcon" theme="outline" size="24" fill="#fff"
                      @click="handlePictureCardPreview(index)" />
                    <delete class="outIcon" theme="outline" size="24" fill="#fff" @click="handleRemove(index)" />
                  </div>
                </div>
              </div>
              <!-- 预览图片窗口 -->
              <el-dialog :close-on-click-modal="false" v-model="dialogVisible" :show-close="false">
                <template #header="{ close, titleId, titleClass }">
                  <div class="myDialogHeader">
                    <span :id="titleId" :class="titleClass">查看图片</span>
                    <div class="close">
                      <close @click="close" theme="outline" size="20" fill="#666" />
                    </div>
                  </div>
                </template>
                <el-image style="width: 100%; height: 100%" :src="dialogImageUrl" fit="contain" />
              </el-dialog>
            </div>
          </div>
        </div>

        <div class="labelItem">
          <div class="term">
            <div class="label">简介</div>
            <div>
              <!-- :toolOptions="toolbarOptions" -->
              <notes class="topic_note" :disabled="isEdit" ref="answerRemarkRef"
                :content="villageInfo.answerRemark" @changeText="changeContentVillage"></notes>
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="communityShow = !communityShow">
            取消
          </div>
          <div class="btn info" @click="addOrEditor(mark)">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 查看村社简介窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="introduceShow" width="800px" :show-close="false">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">{{ addVillageReq.name }}</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel loginDialog">
        <div class="labelItem">
          <div class="term fromFlex">
            <div class="label">村社图片</div>
            <div class="labelCont">
              <el-image class="image" :src="addVillageReq.imageUrl" fit="contain" alt="" />
            </div>
          </div>
        </div>
        <div class="labelItem">
          <div class="term fromFlex">
            <div class="label">简介</div>
            <div class="labelHtml">
              <div v-html="addVillageReq.synopsis"></div>
            </div>
          </div>
        </div>

        <div class="labelBtn">
          <div class="btn default" @click="close()">
            取消
          </div>
          <div class="btn info">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Notes from "@/components/Notes.vue";
var toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  ["image"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "systemSettingsRole",
  components: { Notes },
  data() {
    return {
      toolbarOptions,
      cont: "",
      dialogVisible: false,
      isEdit: false,
      uploadPicture: false,
      uploadPhotoForm: {
        fileList: [],
        imageList: [],
      },
      villageInfo: {
        answerRemark: "",
      },
      communityShow: false,
      introduceShow: false,
      mark: 0,
      input1: "",
      input: "",
      value: "",
      value1: "",
      fileList: [],
      options: [
        {id : 2,name : "城镇"},
        {id : 3,name : "行政村"},
        {id : 4,name : "居委会"},
        {id : 16,name : "社区"},
      ],
      option: [
        {
          value: 2,
          name: "全部"
        },
        {
          value: 1,
          name: "正常"
        },
        {
          value: 0,
          name: "禁用"
        }
      ],
      adminVillageRequest: {
        page: 1,
        limit: 10,
      },
      findByVillageList: [],
      total: 0,
      page: 1,
      name: "",
      addVillageReq: {},
      imageUrl: "",
      updateStatusReq: {
        id: 0,
      },
      villageTotal: {
        areaTotal: 0,
        villageTotal: 0,
      },
      dialogImageUrl: "",
      newId: 0,
      loading: false,
      noteString: "",
      timeOut: null,
    };
  },
  mounted() {
    this.getFindByVillageList(this.page);
    // this.getVillageType();
    this.getFindByVillageTotal();
  },
  methods: {
    getIsValid(value) {
      this.adminVillageRequest.page = 1;
      if (value == null) {
        this.getFindByVillageList(1);
      } else if (value == 2) {
        this.adminVillageRequest.isValid = null;
        this.getFindByVillageList(1);
      } else {
        this.adminVillageRequest.isValid = value;
        this.getFindByVillageList(1);
      }
    },
    close() {
      this.communityShow = false;
      this.introduceShow = false;
      this.dialogVisible = false;
    },
    //根据name查询
    getInput() {
      if (this.timeOut != null) {
        clearTimeout(this.timeOut);
        this.timeOut = null;
      }
      this.timeOut = setTimeout(() => {
        this.adminVillageRequest.name = this.name;
        this.getFindByVillageList();
      }, 1000);
    },
    getVillage(id) {
      this.adminVillageRequest.type = id;
      this.adminVillageRequest.page = 1;
      this.getFindByVillageList(1);
    },
    addOrEditor(mark) {
      if (this.mark == 0) {
        this.addVillage();
      } else {
        this.updateVillageInformation();
      }
    },
    clearReq() {
      this.communityShow = true;
      this.newId = 0,
        this.mark = 0,
        this.addVillageReq = {};
      this.uploadPhotoForm.imageList = [];
      this.$refs.answerRemarkRef.setContent("");
    },
    getIntroduction(id) {
      this.getOneVillage(id);
      this.introduceShow = true;
      this.communityShow = false;
    },
    // 上传添加图片到文件列表
    addAllChangeImg(e) {
      this.uploadPicture = true
      this.uploadImage(e.raw).then((res) => {
        this.uploadPhotoForm.imageList.push(res.result);
        this.imageUrl = res.result
        this.uploadPicture = false
      });
    },
    // 预览图片
    handlePictureCardPreview(index) {
      this.dialogVisible = true;
      this.dialogImageUrl = this.uploadPhotoForm.imageList[index];
    },
    // 删除图片
    handleRemove(index) {
      this.uploadPhotoForm.fileList = []
      this.uploadPhotoForm.imageList = []
    },
    // 富文本框内容切换
    changeContentVillage(data) {
      this.villageInfo.answerRemark = data.content;
      this.noteString = data.text;
      // this.answerRemarkTem = data.text;
    },
    //查询后台村/社区的数据集合
    getFindByVillageList(page = 1) {
      this.loading = true;
      this.findByVillageList = []
      this.adminVillageRequest.page = page;
      this.$http.post("/axh/findBy/areaAndVillage", this.adminVillageRequest).then((res) => {
        this.findByVillageList = res.list;
        this.total = res.total;
        this.loading = false;
      });
    },
    //添加村/社区
    addVillage() {
      this.addVillageReq.imageUrl = this.imageUrl;
      this.addVillageReq.synopsis = this.villageInfo.answerRemark;
      this.addVillageReq.isSort = 1;
      this.$http.post("/axh/add/areaOrVillage", this.addVillageReq).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '恭喜你，添加成功',
            type: 'success'
          });
          this.communityShow = false;
          this.addVillageReq = {}
          this.villageInfo.answerRemark = ""
          this.uploadPhotoForm.imageList = [],
            this.imageUrl = null
          this.getFindByVillageList(1);
          this.getFindByVillageTotal();
        }
      });
    },
    //获取所有二级父类
    // getVillageType() {
    //   this.$http.post("/axh/findBy/parent", {}).then((res) => {
    //     this.options = res.result;
    //   });
    // },
    //后台回显单个村镇数据
    getOneVillage(id) {
      this.communityShow = true;
      this.newId = id;
      this.addVillageReq = {}
      this.$http.post("/axh/findBy/oneArea", { id }).then((res) => {
        this.addVillageReq = res.result
        this.villageInfo.answerRemark = res.result.synopsis;
        this.$refs.answerRemarkRef.setContent(res.result.synopsis);
        if (res.result.imageUrl != "" && res.result.imageUrl != null) {
          this.uploadPhotoForm.imageList = res.result.imageUrl.split(";");
        } else {
          this.uploadPhotoForm.imageList = [];
        }
        this.mark = 1;
      });
    },
    //修改状态
    updateVillageStatus(id, isValid) {
      this.updateStatusReq.id = id;
      this.updateStatusReq.isValid = isValid;
      this.$confirm("是否确定修改状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http.post("/axh/update/isValid", this.updateStatusReq).then((res) => {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.getFindByVillageList(1);
          this.getFindByVillageTotal();
        });
      })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消操作",
          });
        });
    },
    //查询村和社区的数量
    getFindByVillageTotal() {
      this.$http.post("/axh/findBy/areaTotal", {}).then((res) => {
        this.villageTotal = res.result;
      });
    },
    //修改村社区信息
    updateVillageInformation() {
      this.addVillageReq.imageUrl = this.uploadPhotoForm.imageList[0];
      this.addVillageReq.synopsis = this.villageInfo.answerRemark;
      this.$http.post("/axh/update/villageInformation", this.addVillageReq).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.communityShow = false;
          this.getFindByVillageList(1);
          this.getFindByVillageTotal();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.systemCommunity {
  padding: 20px;
}

.screenContent {
  display: flex;
  margin-bottom: 20px;

  .screenNav {
    flex: 1;
    width: 0;
    background-color: $colorFFFFFF;
    margin-right: 24px;
    border-radius: 4px;
    padding: 16px;
    height: 72px;

    .scrTop {
      display: flex;
      align-items: center;

      .labItem {
        flex: 1;
        margin-right: 30px;
        display: flex;
        align-items: center;

        .label {
          margin-right: 6px;
        }

        .labScach {
          flex: 1;
          min-width: 200px;
          width: 0;
        }

        &:nth-last-child(1) {
          margin-right: 0;
        }
      }

      .success {
        width: 108px;

        .btnIcon {
          margin-left: 5px;
        }
      }
    }
  }

  .censusNav {
    background-color: $colorFFFFFF;
    width: 280px;
    height: 72px;
    border-radius: 4px;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;

    .censusItem {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $color35353F;
      font-size: 16px;

      .hoemIcon {
        margin-right: 5px;
      }

      span {
        line-height: 18px;
      }
    }
  }
}

.tableCont {
  background-color: $bgColorFFFFFF;
  border-radius: 4px;
  overflow: hidden;

  .spanBtn {
    cursor: pointer;
    padding-right: 12px;
  }
}

.topic_note {
  border: 1px solid $bdColorD8D8D8;
}

.fromFlex {
  display: flex;

  .label {
    text-align: justify;
    width: 72px;
    margin-right: 16px;

    &:after {
      content: "";
      width: 100%;
      display: inline-block;
      overflow: hidden;
      height: 0;
    }
  }

  .labelCont {
    flex: 1;
    width: 0;
    width: 300px;
    height: 194px;

    .image {
      background-color: #ededed;
      border-radius: 4px;
      width: 300px;
      height: 194px;
    }
  }

  .labelHtml {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    width: 0;
    border-radius: 4px;
    border: 1px solid $bdColorD8D8D8;

    /deep/ img {
      max-width: 100%;
      max-height: 100%;
    }
  }
}
</style>
